<div class="wrapper">

    {{menu}}

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="view-header">
                        <div class="header-title" style="float:left;">
                            <h3 class="m-b-xs">All reports</h3>
                            <small>View all reports, search for reports and share or delete them.</small>
                        </div>
                        <div class="search hidden-xs" style="margin-top: 15px;width: 345px;float:right;">
                            <form method="get">
                                <input class="form-control" name="search" placeholder="Search for domain, IP or URL"
                                       style="float: left;width: 260px;" type="text"
                                       value="{{searchQuery[0]}}">
                                <button class="btn" style="float:right;" type="submit">Search</button>
                            </form>
                        </div>
                    </div>
                    <hr>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-filled">
                        <div class="panel-heading">Information</div>
                        <div class="panel-body">
                            <div class="table-responsive">

                                <table class="table" style="white-space: nowrap;">
                                    <thead>
                                    <tr>
                                        <th style="width:5%">
                                            <label class="checkbox-label">
                                                <input id="select-all" name="select-all" type="checkbox">
                                                <span class="checkbox-custom rectangular"></span>
                                            </label>
                                        </th>
                                        <th style="width:6%">ID</th>
                                        <th style="width:10%">View</th>
                                        <th>URL</th>
                                        <th>IP</th>
                                    </tr>
                                    </thead>
                                    <tbody id="reports-list">
                                    {{reportsList[0]}}
                                    </tbody>
                                </table>

                                <div class="">
                                    <div class="dataTables_paginate paging_simple_numbers">
                                        <ul class=pagination>
                                            <li class="paginate_button previous">
                                                <a href="?page={{page[-]}}{{searchQuery[1]}}">Previous</a>
                                            </li>
                                            <li class="paginate_button active">
                                                <a href="?page={{page[]}}{{searchQuery[1]}}">{{page[]}}</a>
                                            </li>
                                            <li class="paginate_button next">
                                                <a href="?page={{page[+]}}{{searchQuery[1]}}"
                                                   style="border-radius: 0px 5px 5px 0px">Next</a>
                                            </li>
                                            <li style="padding-left:10px;">
                                                with selected:
                                                <button class="btn delete-selected">Delete</button>
                                                <button class="btn archive-selected">Archive</button>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="modal fade" id="shareModal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type="button">&times;</button>
                    <h3 class="m-b-xs">Share</h3>
                    <small>Share your reports using direct link or with other ezXSS users</small>
                </div>
                <div class="modal-body">
                    <div id="alert"></div>
                    <form class="form" id="share-report">
                        {{csrf[]}}
                        <input hidden id="reportid" type=hidden value="0">

                        <div class="form-group">
                            <label class="control-label" for="domain">Direct share link</label>
                            <input class="form-control" id="shareid" type="text" value="">
                        </div>

                        <hr>

                        <div class="form-group">
                            <label class="control-label" for="domain">Domain</label>
                            <input class="form-control" id="domain" name="domain" type="text" value="">
                        </div>
                        <button class="btn">Share</button>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" type="button">Close</button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        var csrf = "{{csrf[true]}}";
    </script>
</div>